var Data = {
    totalPage: 1,
	SBUX: [
			{
                name : '张雨绮',
				email: 'yuqi@starbucks.cn',
				password: 'yuqi&1qaz',
				createTime: '2016/5/23',
			},
			{
                name:'马云川',
				email: 'yunchuan@starbucks.cn',
				password: 'yunchuanCHINA',
				createTime: '2016/11/5'
			},
			{
                name:'刘达明',
				email: 'daming@starbucks.cn',
				password: 'daming&1QAZ',
				createTime: '2017/1/19'
			},{
                name:'李大山',
				email: 'dashan@starbucks.cn',
				password: 'dashan&1QAZ',
				createTime: '2017/1/14'
			}
            ,{
                name:'张也',
				email: 'zhangye@starbucks.cn',
				password: 'zhangye&1QAZ',
				createTime: '2017/3/5'
			},{
                name:'李秀郡',
				email: 'xiujun@starbucks.cn',
				password: 'xiujun&1QAZ',
				createTime: '2017/3/5'
			},{
                name:'王聪',
				email: 'wangcong@starbucks.cn',
				password: 'wangcong&1QAZ',
				createTime: '2017/3/5'
			}
    ],
    SHSBUX: [
        {
            name : '陆诗雨',
            email: 'shiyu@starbucks.cn',
            password: 'shiyu&1qaz',
            createTime: '2016/5/23',
        }, {
            name : '杨迪',
            email: 'yangdi@starbucks.cn',
            password: 'yangdi&1qaz',
            createTime: '2016/8/24',
        }, {
            name : '徐光宙',
            email: 'guangyu@starbucks.cn',
            password: 'guangyu&1qaz',
            createTime: '2016/1/3',
        }, {
            name : '陈冠霖',
            email: 'guanlin@starbucks.cn',
            password: 'guanlin&1qaz',
            createTime: '2016/2/2',
        }, {
            name : '朱腾芬',
            email: 'tengfen@starbucks.cn',
            password: 'tengfen&1qaz',
            createTime: '2012/11/27',
        }, {
            name : '应冶邦',
            email: 'zhibang@starbucks.cn',
            password: 'zhibang&1qaz',
            createTime: '2014/8/17',
        }, {
            name : '程砚秋',
            email: 'yanqiu@starbucks.cn',
            password: 'yanqiu&1qaz',
            createTime: '2015/3/12',
        },  
    ],
    CCB: [
			{
                name : '王本润',
				email: 'customercarecn@CCB.COM',
				password: '472XBK.cn',
				createTime: '2016/5/23'
			},
			{
                name:'李光启',
				email: 'CCBC.ZH@CCB.COM',
				password: 'CBC3651CHINA',
				createTime: '2016/11/5'
			},
			{
                name:'王特立',
				email: 'wangteli@CCB.COM',
				password: 'wangteli&1QAZ',
				createTime: '2017/1/19'
			},{
                name:'舒若瑄',
				email: 'shuruoxuan@CCB.COM',
				password: 'shuruoxuan&1QAZ',
				createTime: '2017/1/14'
			}
            ,{
                name:'孙兰沅',
				email: 'sunlan@CCB.COM',
				password: 'sunlan&1QAZ',
				createTime: '2017/3/5'
			},{
                name:'赵子淇',
				email: 'ziqi@CCB.COM',
				password: 'ziqi&1QAZ',
				createTime: '2017/9/7'
			}
    ],
    BMW: [
			{
                name : '汪清平',
				email: 'customercarecn@jingbaohang.bmv.com.cn',
				password: '472XBK.cn',
				createTime: '2016/5/23'
			},
			{
                name:'江浩之',
				email: 'haozhi@jingbaohang.bmv.com.cn',
				password: 'haozhiCHINA',
				createTime: '2016/11/5'
			},
			{
                name:'刘洛旋',
				email: 'luoxuan@jingbaohang.bmv.com.cn',
				password: 'luoxuan&1QAZ',
				createTime: '2017/1/19'
			},{
                name:'刘小玉',
				email: 'xiaoyu@jingbaohang.bmv.com.cn',
				password: 'xiaoyu&1QAZ',
				createTime: '2017/1/14'
			}
            ,{
                name:'王俊一',
				email: 'junyi@jingbaohang.bmv.com.cn',
				password: 'junyi&1QAZ',
				createTime: '2017/3/5'
			},{
                name:'刘辉',
				email: 'liuhui@jingbaohang.bmv.com.cn',
				password: 'liuhui&1QAZ',
				createTime: '2017/9/7'
			},{
                name:'李国英',
				email: 'guoyin@jingbaohang.bmv.com.cn',
				password: 'guoyin&1QAZ',
				createTime: '2017/6/2'
			},{
                name:'马桂明',
				email: 'guiming@jingbaohang.bmv.com.cn',
				password: 'guiming&1QAZ',
				createTime: '2017/8/2'
			},{
                name : '王树英',
				email: 'shuyin@jingbaohang.bmv.com.cn',
				password: 'shuyin&1QAZ',
				createTime: '2016/5/23'
			}
    ],
    BMW2: [
			{
                name:'赵涯生',
				email: 'yasheng@jingbaohang.bmv.com.cn',
				password: 'yasheng1CHINA',
				createTime: '2016/11/5'
			},
			{
                name:'刘威林',
				email: 'weilin@jingbaohang.bmv.com.cn',
				password: 'weilin&1QAZ',
				createTime: '2017/1/19'
			},{
                name:'李小凤',
				email: 'xiaofeng@jingbaohang.bmv.com.cn',
				password: 'xiaofeng&1QAZ',
				createTime: '2017/6/2'
			},{
                name:'刘芝纶',
				email: 'zhilun@jingbaohang.bmv.com.cn',
				password: 'zhilun&1QAZ',
				createTime: '2017/8/2'
			}
    ],
    QT: [
			{
                name : '李虹天',
				email: 'hongtian@163.com',
				password: 'hongtian&1qaz',
				createTime: '2016/5/23'
			},
			{
                name:'梁锦文',
				email: 'jingwen@CCB.COM',
				password: 'jingwenCHINA',
				createTime: '2016/11/5'
			},
			{
                name:'舒邦俊',
				email: 'bangjun@jingbaohang.bmv.com.cn',
				password: 'bangjun&1QAZ',
				createTime: '2017/1/19'
			},{
                name:'江汉文',
				email: 'hanwen@jingbaohang.bmv.com.cn',
				password: 'hanwen&1QAZ',
				createTime: '2017/1/14'
			}  
    ],
    layered : [
        {
            name: '星巴克',
            layered: [
                {
                    name: '北京星巴克',
                    layered: [
                        {
                            name: '北京星巴克',
                            layered: []
                        }
                    ]
                },
                {
                    name: '上海星巴克',
                    layered: [
                        {
                            name: '上海星巴克',
                            layered: []
                        }
                    ]
                }
            ]
        },{
            name: '宝马',
            layered: [
                {
                    name: '北京宝马',
                    layered: [
                        {
                            name: '宝马',
                            layered: []
                        }
                    ]
                }
            ]
        },{
            name: '建设银行',
            layered: [
                {
                    name: '北京建设银行',
                    layered: [
                        {
                            name: '建设银行',
                            layered: []
                        }
                    ]
                }
            ]
        }
    ]
};
var Content = React.createClass({
    render:function(){
        return(
            < Main />
        )
    }
});

class Main extends React.Component{
    constructor(){
        super();
        this.state = {
          data : [],
          layered : [],
          branch : '',
          corporationName : '',
          indexId : '',
          upperLayer : '',
          currentPage: 1,
          totalPage: 1,
          pageSize: 9,
          eixtName :'',
          eixtEmail :'',
          eixtPassword : '',
          eixtCreateTime: '',
          eixtAffiliation: '',
          selectValue: '',
          selectedData: [],
          adduserbtn: false
        }
    };
    componentDidMount(){
        var pageSize = this.state.pageSize,
			pageIndex = sessionStorage.getItem('currentPage');

        if(!pageIndex){
			pageIndex = 1;
			sessionStorage.setItem('currentPage', pageIndex);
		}
		this.setState({
            layered : Data.layered,
			currentPage: pageIndex
		});
    }
    changePageHandle(currentPage){
		this.setState({
			currentPage: currentPage
		});
		var data = this.state.data;
		sessionStorage.setItem('currentPage', currentPage);
		//var curData = cacheData[currentPage - 1];
        if(currentPage ==2 ){
            this.setState({
                data: Data.BMW2
            });
        }else if(currentPage ==1 ){
            this.setState({
                data: Data.BMW
            })
        }
		
	}
    change (name,data){
        var eixtAffiliation = this.state.eixtAffiliation,
            adduserbtn = this.state.adduserbtn,
            selectValue = this.state.selectValue,
            selectedData = this.state.selectedData,
            totalPage = this.state.totalPage,
            currentPage = this.state.currentPage;
        this.setState({
            adduserbtn : true,
            selectValue : name,
            selectedData : data
        });
        if(name == "北京星巴克"){
            this.setState({
                data:Data.SBUX,
                eixtAffiliation:"北京星巴克",
                totalPage : 1,
                currentPage : 1
                
            })
        }else if(name == "上海星巴克"){
            this.setState({
                data:Data.SHSBUX,
                eixtAffiliation:"上海星巴克",
                totalPage : 1,
                currentPage : 1
            })
        }else if(name == "北京建设银行"){
            this.setState({
                data:Data.CCB,
                eixtAffiliation:"北京建设银行",
                totalPage : 1,
                currentPage : 1
            })
        }else if(name == "北京宝马"){
            this.setState({
                data:Data.BMW,
                eixtAffiliation:"北京宝马",
                totalPage : 2
            })
        }else{
            this.setState({
                data:Data.QT,
                eixtAffiliation:"其他",
                totalPage : 1,
                currentPage : 1
            })
        }
    }
    
    addSubmit(){
        var layered = this.state.layered,
            corporationName = this.state.corporationName,
            upperLayer = document.getElementById('upperLayer').value,
            islayered = 0;
        layered.length>0?layered.map((event,index) =>{
            if(event.name == upperLayer){
                if(corporationName){
                    event.layered.push({name:corporationName,layered: []});
                    islayered = 1;
                }
            }
        }):'';
        if(islayered == 0) {
            if(corporationName){
                layered.push({name : corporationName,layered: []})
            }
        }
       
        this.setState({
            layered : layered,
            corporationName :''
        });   
    }
    changeValue(event){
        var name = this.state.corporationName,
            upperLayer = this.state.upperLayer;
       if(event.target.id == 'name'){
           this.setState({
               corporationName : event.target.value
           });
       }else if(event.target.id == 'upperLayer'){
           this.setState({
               upperLayer : event.target.value
           });
       }
    }
    resetValue() {
        this.setState({
            name : '' ,
            upperLayer : '' 
        });
    }
    changeIndex (index) {
        var data = this.state.data,
            indexId = index,
            eixtAffiliation = this.state.eixtAffiliation;
        this.setState({
            indexId : index,
            eixtName : data[indexId].name,
            eixtEmail : data[indexId].email,
            eixtPassword : data[indexId].password ,
            eixtCreateTime : data[indexId].createTime,
            eixtAffiliation : eixtAffiliation
        });
    }
    deleteSubmit() {
        var indexId = this.state.indexId,
            data = this.state.data;
            
        data.splice(indexId, 1);
        this.setState({
            data: data
        });
    }
    eixtSubmit() {
        var eixtAffiliation = this.state.eixtAffiliation,
            eixtName = this.state.eixtName,
            eixtEmail = this.state.eixtEmail,
            eixtPassword = this.state.eixtPassword,
            eixtCreateTime = this.state.eixtCreateTime,
            data = this.state.data,
            indexId = this.state.indexId;
        data.splice(indexId, 1, {
            name:eixtName,
            email:eixtEmail,
            password:eixtPassword,
            createTime:eixtCreateTime
        });
        this.setState({
            data : data
        })
    }
    eixt(event) {
        var indexId = this.state.indexId,
            eixtName = this.state.eixtName,
            eixtEmail = this.state.eixtEmail,
            eixtPassword = this.state.eixtPassword,
            eixtCreateTime = this.state.eixtCreateTime,
            eixtAffiliation = this.state.eixtAffiliation;
        if(event.target.id == 'name'){
            this.setState({
                eixtName : event.target.value 
            });
        }else if(event.target.id == 'mail'){
            this.setState({
                eixtEmail : event.target.value 
            });
        }else if(event.target.id == 'password'){
            this.setState({
                eixtPassword : event.target.value 
            });
        }else if(event.target.id == 'affiliation'){
            this.setState({
                eixtAffiliation : event.target.value 
            });
        }    
    }
    resetdata () {
        this.setState({
            eixtName :'',
            eixtEmail :'',
            eixtPassword : '',
            eixtCreateTime: ''
        })
    }
    delCorporation(index,elem1) {
        var data = this.state.data;
        elem1.splice(index,1)
        this.setState({
            data: elem1
        })
    }
    addUserSubmit(name,mail,prompt1,prompt2){
        var data = this.state.data,
            myDate = new Date(),
            createTime = myDate.toLocaleDateString();
        if( prompt1 && prompt2){
            data.unshift({name:name,email:mail,password:111222,createTime:createTime});
            this.setState({
                data: data
            })
        }
    }
    resetAddValue(){
        this.setState({
            name: '',
            mail: ''
        })
    }
    render(){
        var data = this.state.data,
            change = this.change.bind(this),
            branch = this.state.branch,
            layered = this.state.layered,
            addSubmit = this.addSubmit.bind(this),
            corporationName = this.state.corporationName,
            upperLayer = this.state.upperLayer,
            changeValue = this.changeValue.bind(this),
            resetValue = this.resetValue.bind(this),
            changeIndex = this.changeIndex.bind(this),
            indexId = this.state.indexId,
            eixtAffiliation = this.state.eixtAffiliation,
            adduserbtn = this.state.adduserbtn,
            delCorporation = this.delCorporation.bind(this),
            selectValue = this.state.selectValue,
            selectedData = this.state.selectedData;
            
            var props = {
                    currentPage: this.state.currentPage,
                    totalPage : this.state.totalPage,
                    changePageHandle : this.changePageHandle.bind(this)
			    },
                 eixtData = {
                    data : this.state.data,
                    eixtName : this.state.eixtName,
                    eixtEmail : this.state.eixtEmail,
                    eixtPassword : this.state.eixtPassword,
                    eixtCreateTime: this.state.eixtCreateTime,
                    eixtAffiliation: this.state.eixtAffiliation,
                    indexId : this.state.indexId,
                    deleteSubmit : this.deleteSubmit.bind(this),
                    eixt : this.eixt.bind(this),
                    eixtSubmit : this.eixtSubmit.bind(this),
                    resetdata : this.resetdata.bind(this)
                    
                },
                adduser = {
                    data : this.state.data,
                    selectValue : this.state.selectValue,
                    selectedData : this.state.selectedData,
                    addUserSubmit : this.addUserSubmit.bind(this)
                };
        return(
            <div className = "row">
                <div className = "col-sm-12">
                <section className="content-header">
                    <h1><span>管理分支机构</span><small></small>
                        <a className= "title" data-toggle="modal" data-target="#addCorporationModal" onClick = {resetValue} href= "#">添加机构</a>
                        <button type= "button" className= {adduserbtn?"pull-right btn btn-default":"pull-right btn btn-default disabled"} data-toggle="modal" data-target="#addUserModal">添加用户</button>
                     </h1>
                </section>
                < AddCorporationModal corporationName= {corporationName} upperLayer= {upperLayer} layered= {layered} addSubmit= {addSubmit} changeValue= {changeValue}/>
                <div className="col-sm-3 bagcolor" id = 'title'>
                    < Layered layered = {layered} data = {data} change = {change} delCorporation={delCorporation}/>
                </div>
                <div className = "col-sm-8 text-center" >
                    {data.length>0 ? <div className="shadow"><table className="table table-bordered table-hover">
                        <thead>
                            <tr className = "table-title">
                            <th>用户名</th>
                            <th>邮箱</th>
                            <th>创建日期</th>
                            <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {
                                data.map((elem, index) => <tr>
                                    <td>{elem.name}</td>
                                    <td>{elem.email}</td>
                                    <td>{elem.createTime}</td>
                                    <td>
                                        <div className="data-opt">
                                            <a data-toggle="modal"   data-target={"#eixt"+ indexId} href = "#">
                                                <span onClick={function(){changeIndex(index)}} className="glyphicon glyphicon-edit"></span>
                                            </a>
                                            <a data-toggle="modal" data-target={"#delete"+indexId} href="#" >
                                                <span onClick={function(){changeIndex(index)}} className="glyphicon glyphicon-trash"></span>
                                            </a>
                                           
                                        </div>
                                    </td>
                                </tr>)
                            }  
                            
                        </tbody>
                    </table>
                    < EixtPopup {...eixtData}/> 
                    < DeletePopup {...eixtData}/> 
                    < Page {...props}/>
                    < AddUserModal  {...adduser}/>
                    </div>
                    :<h1 style={{fontFamily:"隶书",color:"#fff",marginTop: "170px"}}>点击左侧机构进行管理</h1>}
                    
                </div>
            </div>
        </div>
        )
    }
}
//添加机构弹窗
class AddCorporationModal extends React.Component{
    constructor(){
        super();
    }
    render(){
        var addSubmit = this.props.addSubmit,
            changeValue = this.props.changeValue,
            corporationName = this.props.corporationName,
            upperLayer = this.props.upperLayer,
            layered = this.props.layered;
        return(
            <div className="modal fade" id="addCorporationModal" role="dialog" aria-labelledby="myModalLabel">
                <div className="modal-dialog" role="document">
                    <div className="modal-content">
                        <div className="modal-header">
                            <button type="button" className="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            <h4 className="modal-title" id="myModalLabel">添加机构</h4>
                        </div>
                        <div className="modal-body text-left">
                            <form>
                                <div className="form-group">
                                    <label htmlFor="upperLayer">所属机构</label>
                                    <select className="form-control" id= "upperLayer" onChange = {changeValue}>
                                        <option value ='无'>无</option>
                                            {
                                                layered ? layered.map((elem, index)=>{
                                                    return <option value={elem.name}>{elem.name}</option>
                                                }) : ''
                                            }
                                        </select>
                                </div>
                                <div className="form-group">
                                    <label HtmlFor="name">机构名称</label>
                                    <input type="text" className="form-control"  onChange = {changeValue} value = {corporationName} id="name" placeholder="机构名称"/>
                                </div>
                            </form>
                        </div>
                        <div className="modal-footer">
                            <button type="button" className="btn btn-default pull-right" data-dismiss="modal">取消</button>
                            <button type="button" className="btn btn-primary pull-right" data-dismiss="modal" onClick = {addSubmit}>保存</button>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
//添加用户弹窗
class AddUserModal extends React.Component{
    constructor(){
        super();
        this.state = {
            name : '',
            mail : '',
            prompt1 : false,
            prompt2 : false
        }
    }

    addUserData (event) {
        var name = this.state.name,
            prompt1 = this.state.prompt1,
            prompt2 = this.state.prompt2,
            reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
        
        if(event.target.name=='name'){
            if(event.target.value.length >= 2){
                this.setState({
                    prompt1 : true
                })
            }else{
                this.setState({
                    prompt1 : false
                })
            }
            this.setState({
                name : event.target.value
            })
        }else if(event.target.name=='mail'){
            if(event.target.value.length==0||!reg.test(event.target.value)){
                this.setState({
                    prompt2 : false
                })
            }else{
                this.setState({
                    prompt2 : true
                })
            }
             this.setState({
                mail : event.target.value
            })
        }
    }

    closeModal(){
        this.setState({
            name : '',
            mail : '',
            prompt1 : false,
            prompt2 : false
        });
    }

    render(){
        var selectValue = this.props.selectValue,
            data = this.props.data,
            selectedData = this.props.selectedData,
            addUserSubmit = this.props.addUserSubmit,
            name = this.state.name,
            addUserData = this.addUserData.bind(this),
            mail = this.state.mail,
            prompt1 = this.state.prompt1,
            prompt2 = this.state.prompt2,
            closeModal = this.closeModal.bind(this);
        return(
            <div className="modal fade" id="addUserModal" role="dialog" aria-labelledby="myModalLabel" >
                <div className="modal-dialog" role="document" >
                    <div className="modal-content">
                        <div className="modal-header">
                            <button type="button" className="close" data-dismiss="modal" aria-label="Close">
                                <span onClick= {closeModal} aria-hidden="true">&times;</span>
                            </button>
                            <h4 className="modal-title text-left" id="myModalLabel">添加用户</h4>
                        </div>
                        <div className="modal-body text-left">
                            <form>
                                <div className="form-group">
                                    <label htmlFor="upperLayer">所属机构</label>
                                    <input type="text" className="form-control" value= {selectValue} id="upperLayer"/>
                                </div>
                                <div className="form-group">
                                    <label HtmlFor="username">名称</label>
                                    <input type="text" className="form-control" value ={name} id="username" onChange ={addUserData} name="name" placeholder="名称"/>
                                </div>
                                <div className="form-group">
                                    <span className= {prompt1?"glyphicon glyphicon-ok-sign icon-color":"glyphicon glyphicon-ok-sign icon"}></span>
                                    <span > 请输入用户名至少二位</span>
                                </div>
                                <div className="form-group">
                                    <label HtmlFor="username">邮箱</label>
                                    <input type="text" className="form-control" value= {mail} id="usermail" onChange ={addUserData} name= "mail" placeholder="邮箱"/>
                                </div>
                                 <div className="form-group">
                                    <span className={prompt2?"glyphicon glyphicon-ok-sign icon-color":"glyphicon glyphicon-ok-sign icon"}></span>
                                    <span> 请输入正确邮箱格式，例如：www@parllay.cn</span>
                                </div>
                            </form>
                        </div>
                        <div className="modal-footer">
                            <button type="button" className="btn btn-default pull-right" data-dismiss="modal" onClick= {closeModal}>取消</button>
                            <button type="button" disabled={prompt1 && prompt2 ? "":"disabled"} className={prompt1 && prompt2? "btn btn-primary pull-right"
                            :"btn btn-primary pull-right btn-disable"} data-dismiss="modal" onClick= {function(){
							    closeModal();
							    addUserSubmit(name,mail,prompt1,prompt2);
							}} >保存</button>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
//分页
class Page extends React.Component {
	pageHandle(currentPage){

		// 调用父组件的查询数据方法
		this.props.changePageHandle(currentPage);

	}
	render() {
		var pageHandle = this.pageHandle.bind(this),
			currentPage = this.props.currentPage,
			totalPage = this.props.totalPage;
		
		return (
			<div className="page">
				<span onClick={(currentPage == 1)?'':function(){
					currentPage = 1;
					pageHandle(currentPage);
				}} className={(currentPage == 1)?'page-disable':''}>首页</span>
				<span onClick={(currentPage == 1)?'':function(){
					currentPage = parseInt(currentPage) - 1;
					pageHandle(currentPage);
				}} className={(currentPage == 1)?'page-disable':''}>上一页</span>
				<span onClick={(currentPage == totalPage)?'':function(){
					currentPage = parseInt(currentPage) + 1;
					pageHandle(currentPage);
				}} className={(currentPage == totalPage)?'page-disable':''}>下一页</span>	
				<span onClick={(currentPage == totalPage)?'':function(){
					currentPage = totalPage;
					pageHandle(currentPage);
				}} className={(currentPage == totalPage)?'page-disable':''}>尾页</span>
			</div>

			);
	}

}
//树结构分层
class Layered extends React.Component{
    constructor(){
        super();
        this.state = {

        };
    };

    render() {
        var data = this.props.data,
            layered = this.props.layered,
            delCorporation = this.props.delCorporation,
            change = this.props.change;
        return(
            <div>
                {
                    layered.length > 0 ? layered.map((elem1, index1) => {
                        return <div className={index1==0?"box box-default":"box box-default collapsed-box"}>
                                    <div className="box-header with-border" data-widget="collapse" onClick={() =>change(elem1.name,elem1)}>
                                        <i className={index1==0?"fa fa-minus":"fa fa-plus"}></i>
                                        <h3 className="box-title" >{elem1.name}</h3>
                                    </div>
                                    <div className="box-body">
                                        <ul className = "nav nav-pills nav-stacked">
                                        {
                                             elem1.layered.length > 0 ?(elem1.layered).map((elem2, index2,elem1) =>{
                                            return <li role="presentation" >
                                                        <a role="button" data-toggle="collapse" href={"#a"+elem2.name} aria-expanded="false" aria-controls="collapseExample">
                                                            <i className="fa fa-circle-o"></i>
                                                            <span onClick={() =>change(elem2.name,elem1)}>{elem2.name}</span>
                                                            <i className="glyphicon glyphicon-remove pull-right" data-toggle="modal" data-target={"#delCorporationModal"+index2+elem2.name} ></i>
                                                        </a>
                                                        <div className="modal fade" id={"delCorporationModal"+index2+elem2.name} role="dialog" >
                                                            <div className="modal-dialog" role="document">
                                                                <div className="modal-content">
                                                                    <div className="modal-header">
                                                                        <button type="button" className="close" data-dismiss="modal" aria-label="Close">
                                                                            <span aria-hidden="true">&times;</span>
                                                                        </button>
                                                                        <h4 className="modal-title" id="myModalLabel">删除机构</h4>
                                                                    </div>
                                                                    <div className="modal-body">
                                                                        <br/>
                                                                        <span>是否删除机构{elem2.name}？删除后不可恢复！</span>
                                                                    </div>
                                                                    <div className="modal-footer">
                                                                        <button type="button" className="btn btn-default pull-right" data-dismiss="modal">取消</button>
                                                                        <button type="button" className="btn btn-primary pull-right" data-dismiss="modal" onClick = {() =>delCorporation(index2,elem1)}>确认</button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                       
                                                        {/*<div className="collapse" id={"a"+elem2.name}>
                                                            <ul className = "nav nav-pills nav-stacked">
                                                                {
                                                                    elem2.layered.length ? elem2.layered.length > 0 ? elem2.layered.map((elem3,index) => {
                                                                        return <li role="presentation" >
                                                                                    <a name="CCB" onClick={change}>
                                                                                        <i className="fa fa-circle-o"></i>
                                                                                        <span>{elem3.name}</span>
                                                                                    </a>
                                                                                </li>
                                                                    }):'':'' 
                                                                }
                                                            </ul>
                                                        </div>*/}
                                                    </li>
                                            }):<li className= "text-center" >快添加机构吧！</li>
                                        }
                                        </ul>
                                    </div>
                                </div>
                        }):''
                    }
                </div>
            )
    };
}
//修改弹窗
class EixtPopup extends React.Component{
    constructor(){
        super();
    }
    
    render(){
        
        var data = this.props.data,
            indexId = this.props.indexId,
            eixtName = this.props.eixtName,
            eixtEmail = this.props.eixtEmail,
            eixtAffiliation = this.props.eixtAffiliation,
            eixtPassword = this.props.eixtPassword,
            eixtCreateTime = this.props.eixtCreateTime,
            eixtSubmit = this.props.eixtSubmit,
            resetdata = this.props.resetdata,
            eixt = this.props.eixt;
        return <div className="modal fade" id={"eixt" + indexId} role="dialog" aria-labelledby={"eixt" + indexId}>
                <div className="modal-dialog" role="document">
                    <div className="modal-content">
                    <div className="modal-header">
                        <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 className="text-left modal-title" id={"eixt" + indexId}>编辑</h4>
                    </div>
                    <div className="modal-body text-left">
                        <form >
                            <div className="form-group">
                                <label htmlFor="name">用户名</label>
                                <input type="text" className="form-control"  value = {eixtName} onChange = {eixt} id="name" placeholder="用户名"/>
                            </div>
                            <div className="form-group">
                                <label htmlFor="mail">邮箱</label>
                                <input type="email" className="form-control" value ={eixtEmail} onChange = {eixt} id="mail" placeholder="邮箱"/>
                            </div>
                            <div className="form-group">
                                <label htmlFor="affiliation">所属机构</label>
                                <input type="text" className="form-control" value ={eixtAffiliation} onChange = {eixt} id="affiliation" placeholder="所属机构"/>
                            </div>
                        </form>
                    </div>
                    <div className="modal-footer">
                        <button type="button" className="btn btn-default pull-right" onClick = {resetdata} data-dismiss="modal">取消</button>
                        <button type="submit" className="btn btn-primary pull-right" onClick = {eixtSubmit} data-dismiss="modal">保存</button>
                    
                    </div>
                    </div>
                </div>
            </div>
    }
}
//删除弹窗
class DeletePopup extends React.Component{
    constructor(){
        super(); 
    }
    render(){
        
        var data = this.props.data,
            indexId = this.props.indexId,
            eixtName = this.props.eixtName,
            deleteSubmit = this.props.deleteSubmit;
        return <div className="modal fade" id={"delete"+indexId} role="dialog" aria-labelledby={"myModal"+indexId}>
                <div className="modal-dialog" role="document">
                    <div className="modal-content">
                    <div className="modal-header">
                        <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 className="modal-title text-left" id={"myModal"+indexId}>删除</h4>
                    </div>
                    <div className="modal-body text-left">
                        <br/>
                        <span>是否删除用户<span style={{color:"red",fontSize:"18px"}}> {eixtName}</span> 的信息？删除后将无法找回，请谨慎操作！</span>
                    </div>
                    <div className="modal-footer">
                        <button type="button" className="btn btn-default pull-right" data-dismiss="modal">取消</button>
                        <button type="button" className="btn btn-primary pull-right" data-dismiss="modal" onClick = {deleteSubmit}>确定</button>
                    
                    </div>
                    </div>
                </div>
            </div>
    }
}
